<template>
    <div class="content">
        <TableLayout form-title="">
            <el-form :model="formInline" class="formInline" label-width="70px" slot="form" v-collapse="true" :rules="rules" ref="formInline">          
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="所属省">
                            <province v-model="formInline.fProvinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属市">
                            <city v-model="formInline.fCityId" :province="formInline.fProvinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属区县">
                            <region v-model="formInline.fAreaId" :city="formInline.fCityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">  
                   <el-col :span="8">
                        <el-form-item label="用户名">
                            <el-input v-model="formInline.account" placeholder="请输入内容" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
 
                    <el-col :span="8">
                        <el-form-item label="负责人">
                            <el-input v-model="formInline.headerName" placeholder="请输入内容" :maxlength="12"></el-input>
                        </el-form-item>
                    </el-col>
 
                    <el-col :span="8">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="formInline.phone" placeholder="请输入内容" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="状态">
                            <el-select v-model="formInline.status" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in formInline.statusList" :key="item.statusNum" :label="item.statusName" :value="item.statusNum">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="top-line">
                    <el-col :span="4" :offset="20"> 
                        <el-button type="primary" class="top-btn" @click="onSubmit('formInline')">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
 
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click="goToAddConpany">添加经销商</el-button>
                </div>
            </div>
            <el-table :data="dataApply" style="width: 100%" border v-loading="loading">
 
                    <el-table-column label="用户名" align="center" prop="account"></el-table-column>
 
                    <el-table-column align="center" label="负责人" prop="userName"></el-table-column>
 
                    <el-table-column align="center" label="手机号" prop="phone"></el-table-column>
 
                    <el-table-column align="center" label="代理学校数">
                        <template scope="scope">
                            <span>{{!scope.row.schoolNum ? 0 : scope.row.schoolNum}}</span>
                        </template>
                    </el-table-column>
 
                    <el-table-column align="center" label="状态">
                        <template scope="scope">
                            <span v-if="scope.row.status=='0'">已禁用</span>
                            <span v-if="scope.row.status=='1'" >正常</span>
                        </template>
                    </el-table-column>   
 
                    <el-table-column label="创建时间" width="170" align="center">
                        <template scope="scope">
                            <span>{{ scope.row.createTime | filterCreateTime }}</span>
                        </template>
                    </el-table-column>
 
                    <el-table-column align="center" label="创建人">
                        <template scope="scope">
                            <span>{{ scope.row.createrName || '--' }}</span>
                        </template>
                    </el-table-column>
 
                    <el-table-column align="left" label="操作" width="220">
                        <template scope="scope">
                            <el-button type="text" class="btn-success" @click="initPassword(scope.row)">初始化密码</el-button>
                            <el-button type="text" class="btn-success" @click="goToReviseCompany(scope.row)">修改</el-button>
                            <el-button type="text" class="btn-success" v-if="scope.row.status=='1' || scope.row.status=='2'" @click="forbidden(scope.row.status,scope.row.id)">禁用</el-button>
                            <el-button type="text" class="btn-success" v-if="scope.row.status=='0'" @click="forbidden(scope.row.status,scope.row.id)">启用</el-button>
                        </template>
                    </el-table-column>                  
                </el-table>
                <div class="pagination-container" style="text-align:right">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="+listQuery.total"
                        :current-page.sync="listQuery.page"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
        </TableLayout>
    </div>
</template>
 
<script>
import { findAgentsByPage, updateAgent, resetPassword} from 'api/agentMangement';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions } from 'vuex';
import { mapGetters } from 'vuex';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import validate from '@/utils/validate';
export default{
    components: {TableLayout, province, city, region},
    data() {
        return {
            formInline: {// form表单数据
                province: [],
                findCity: [],
                findArea: [],
                fProvinceId: '',
                fAreaId: '',
                fCityId: '',
                status: '',
                phone: '',
                account: '', // 账号
                headerName: '', // 负责人
                statusList: [// 状态列表
                    {
                        statusNum: '',
                        statusName: '全部'
                    },
                    {
                        statusNum: '0',
                        statusName: '已禁用'
                    },
                    {
                        statusNum: '1',
                        statusName: '正常'
                    }
                ]
            },
            dataApply: [],
            dialogFormVisible: false,
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            dialog: {
                dialogFormVisible: false,
                orgUserId: ''
            },
            rules: {
                phone: [...validate.phone()]
            },
            loading: true
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
    // 获取用户id
        ...mapGetters([
            'uid'
        ])
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },
    filters: {
        filterCreateTime(val) {
            if (val) {
                return val.substr(0, val.length-2) 
            } else {
                return '--'
            }
        }
    },
    // 初始化
    created() {
        this.listQuery.page = 1;
        this.searchFetchData();
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            findAgentsByPage(this.listQuery.page, this.config.pageSize, this.formInline.fProvinceId, this.formInline.fCityId, this.formInline.fAreaId,
            this.formInline.account, this.formInline.headerName, this.formInline.phone, this.formInline.status).then(response => {
                this.dataApply = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false;
            });
        },
        // 表单查询
        onSubmit(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
        },
          // 初始化密码
        initPassword(row) {
            this.$confirm('确定初始化用户【'+row.account+'】的密码?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                resetPassword(row.id).then(response => {
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: '初始化密码成功，新密码为111111'
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 查看详情
        watchDetail(row) {
            this.dialog.orgUserId = row.id;
            this.dialog.account = row.account;
            this.dialog.phone = row.phone;
            this.dialog.userName = row.userName;
            this.dialog.dialogFormVisible = true;
        },
        // 禁用启用账号
        forbidden(status, pid) {
            var forbidden;
            if (status==1) {
                forbidden = '确定要禁用该经销商?';
            } else {
                forbidden = '确定要启用该经销商?';
            }
            this.$confirm(forbidden, ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                updateAgent(status, pid).then(response => {
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: response.data.errorMsg
                    })
                });  
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 修改经销商成功刷新页面
        dilogSuccess() {
            this.searchFetchData();
        },
        // 添加经销商跳转
        goToAddConpany() {
            this.$router.push('addAgent')
        },
        // 修改经销商跳转
        goToReviseCompany(row) {
            let str = row.id +','+row.account+','+row.phone+','+row.userName;
            this.$router.push({path: `reviseAgent/${str}`});
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor: #fff;
    .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right: 0px;
                top: 18px;
            }
        }
    }
}
</style>